import { createRoot } from 'react-dom/client'
import {
  HashRouter,
  BrowserRouter,
  Routes,
  Route,
  Link,
} from './react-router-dom'

import Home from './components/Home.jsx'
import User from './components/User.jsx'
import UserAdd from './components/UserAdd.jsx'
import UserList from './components/UserList.jsx'
import UserDetail from './components/UserDetail.jsx'
import Profile from './components/Profile.jsx'
import Post from './components/Post.jsx'
import NotFound from './components/NotFound.jsx'


const root = createRoot(document.getElementById('root'))

root.render(
  // 路由容器
  <HashRouter>
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/user">用户管理</Link></li>
      <li><Link to="/profile">profile</Link></li>
      <li><Link to="/post/123">post/123</Link></li>
    </ul>
    {/* 里面保存路由规则  */}
    <Routes>
      {/* 每个 Route 组件代表一个路由规则 */}
      <Route path='/' element={<Home />}></Route>
      <Route path="*" element={<NotFound />}></Route>
      <Route path='/user' element={<User></User>}>
        <Route path="add" element={<UserAdd></UserAdd>}></Route>
        <Route path="list" element={<UserList></UserList>}></Route>
        <Route path="detail/:id" element={<UserDetail></UserDetail>}></Route>
      </Route>
      <Route path='/profile' element={<Profile />}></Route>
      <Route path='/post/:id' element={<Post />}></Route>
    </Routes>
  </HashRouter>
)
